﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frittt - Free Responsive Single Page BS3 Template</title>
    <!-- Stylesheets -->
    <link type="text/css" href="css/bootstrap.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic,500italic,500,300italic,300' rel='stylesheet' type='text/css'>
    <link type="text/css" href="icons/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link type="text/css" href="icons/rondo/style.css" rel="stylesheet">
    <link href="css/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <link type="text/css" href="css/owl.carousel.css" rel="stylesheet">
    <link type="text/css" href="css/owl.transitions.css" rel="stylesheet">
    <link type="text/css" href="css/style.css" rel="stylesheet">
</head>

<body>
    <header class="header" id="jump">
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span>
                    </button>

                    <div class="collapse navbar-collapse hidden-xs">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="active"><a href="#jump0">Home</a></li>
                            <li><a href="#jump1">Services</a></li>
                            <li><a href="#jump2">About Us</a></li>
                            <li><a href="#jump3">Portfolio</a></li>
                            <li><a href="#jump4">Pricing</a></li>
                            <li><a href="#jump5">Our Team</a></li>
                            <li><a href="#jump6">Blog</a></li>
                            <li><a href="#jump7">Contact Us</a></li>
                        </ul>
                    </div>
                    <!-- /.navbar-collapse -->
                    <div class="collapse navbar-responsive-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#jump0" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            Home</a></li>
                            <li><a href="#jump1" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            Services</a></li>
                            <li><a href="#jump2" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            Portfolio</a></li>
                            <li><a href="#jump3" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            Pricing</a></li>
                            <li><a href="#jump4" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            Team</a></li>
                            <li><a href="#jump5" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            Clients</a></li>
                            <li><a href="#jump6" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            Contact</a></li>
                        </ul>
                    </div>
                    <!-- /.navbar-responsive-collapse -->
                </div>
        </nav>
    </header>
    <div class="jumper" id="jump0">
    </div>


    <section id="hero">
        <div id="owl-main" class="owl-carousel height-lg owl-inner-nav owl-ui-lg">

            <div class="item" style="background-image: url(img/header/slider01.jpg);">
                <div class="container">
                    <div class="caption vertical-center text-center">

                        <h1 class="fadeInDown-1 light-color">Multi Purpose Template</h1>
                        <p class="fadeInDown-2 medium-color">Create your online portfolio in minutes with the professionally designed Frittt responsive bootstrap template. </p>
                        <div class="fadeInDown-3">
                            <a href="#" class="btn btn-outline btn-lg">Free Download Now</a>
                        </div>
                        <!-- /.fadeIn -->

                    </div>
                    <!-- /.caption -->
                </div>
                <!-- /.container -->
            </div>
            <!-- /.item -->

            <div class="item" style="background-image: url(img/header/slider02.jpg);">
                <div class="container">
                    <div class="caption vertical-center text-right">

                        <h1 class="fadeInLeft-1 light-color">Built Using Bootstrap 3</h1>
                        <p class="fadeInLeft-2 light-color">Frittt is designed on the most popuplar framework by TWitter - Bootstrap 3. It comes with semantic & valid code with SEO friendly structure.</p>
                        <div class="fadeInLeft-3">
                            <a href="#" class="txt-btn">Dowload Now</a>
                        </div>
                        <!-- /.fadeIn -->

                    </div>
                    <!-- /.caption -->
                </div>
                <!-- /.container -->
            </div>
            <!-- /.item -->

            <div class="item" style="background-image: url(img/header/slider03.jpg);">
                <div class="container">
                    <div class="caption vertical-center text-right">

                        <h1 class="fadeInLeft-1 light-color">Handcrafted with care and love</h1>
                        <p class="fadeInLeft-2 light-color">Frittt free template is built to provide great user experience.</p>
                        <div class="fadeInLeft-3">
                            <a href="#" class="btn btn-large">Get your copy now!</a>
                        </div>
                        <!-- /.fadeIn -->

                    </div>
                    <!-- /.caption -->
                </div>
                <!-- /.container -->
            </div>
            <!-- /.item -->


        </div>
        <!-- /.owl-carousel -->
    </section>


    <div id="jump1" class="jumper">
    </div>
    <div class="section type-3">
        <div class="container">
            <div class="section-headlines">
                <h4>Our Services</h4>
                <div class="module-line"></div>
                <div class="section-intro">
                    We love creating innovative strategies for the web. All kind of brands hire us: we make difficult things easy, but never take anything lightly.
                </div>
            </div>


            <div class="row">

                <div class="col-sm-3">

                    <div class="iconbox">
                        <div class="iconbox-icon">
                            <span class="fa fa-trophy"></span>
                        </div>
                        <div class="iconbox-text">
                            <h3 class="iconbox-title">Logo Design</h3>
                            <div class="iconbox-desc">
                                Thus, then, one of our own noble stamp, even a whaleman, is the tutelary guardian of England.
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-sm-3">

                    <div class="iconbox">
                        <div class="iconbox-icon">
                            <span class="fa fa-bug"></span>
                        </div>
                        <div class="iconbox-text">
                            <h3 class="iconbox-title">Marketing</h3>
                            <div class="iconbox-desc">
                                Thus, then, one of our own noble stamp, even a whaleman, is the tutelary guardian of England.
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-sm-3">

                    <div class="iconbox">
                        <div class="iconbox-icon">
                            <span class="fa fa-paint-brush"></span>
                        </div>
                        <div class="iconbox-text">
                            <h3 class="iconbox-title">Design</h3>
                            <div class="iconbox-desc">
                                Thus, then, one of our own noble stamp, even a whaleman, is the tutelary guardian of England.
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-sm-3">

                    <div class="iconbox">
                        <div class="iconbox-icon">
                            <span class="fa fa-rocket"></span>
                        </div>
                        <div class="iconbox-text">
                            <h3 class="iconbox-title">Branding</h3>
                            <div class="iconbox-desc">
                                Thus, then, one of our own noble stamp, even a whaleman, is the tutelary guardian of England.
                            </div>
                        </div>
                    </div>

                </div>

            </div>



        </div>
    </div>

    <div id="jump2" class="jumper">
    </div>

    <div class="sectionB0" id="about">

        <div class="container">
            <div class="section-headlines">
                <h4>About Us</h4>
                <div class="module-line"></div>
                <div class="section-intro">
                    We love creating innovative strategies for the web. All kind of brands hire us: we make difficult things easy, but never take anything lightly.
                </div>
            </div>
        </div>
        <div class="row margin-0 position-relative">

            <div class="col-xs-12 col-md-6 side-image"></div>

            <div class="col-xs-12 col-md-6 col-md-offset-6 side-image-text">

                <div class="row">

                    <div class="col-sm-12">

                        <div class="module-header">
                            <h2 class="module-title">About us</h2>
                            <div class="module-subtitle">
                                He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly,
                                slightly domed and divided by arches into stiff sections.
                            </div>
                            <div class="module-line"></div>
                        </div>

                    </div>

                </div>
                <!-- .row -->

                <div class="row">

                    <div class="col-sm-6">

                        <div class="iconboxleft">
                            <div class="iconboxleft-icon">
                                <span class="fa fa-plug"></span>
                            </div>
                            <div class="iconboxleft-text">
                                <h3 class="iconboxleft-title"><a href="https://wen-huan.gitee.io/homework-100">文欢</a> </h3>
                                <div class="iconboxleft-desc">
                                    Cute and beautiful, like to chase Korean dramas, can play monsters, can not run the bike baby
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-sm-6">

                        <div class="iconboxleft">
                            <div class="iconboxleft-icon">
                                <span class="fa fa-newspaper-o"></span>
                            </div>
                            <div class="iconboxleft-text">
                                <h3 class="iconboxleft-title"><a href="http://qing-jiu.gitee.io/personal-web-sites">赵琴</a> </h3>
                                <div class="iconboxleft-desc">
                                    A not fierce but have an ambition technician, but lovely love, strange strange, can just can sweet, when the strength is big can carry the bucket, the strength of the hour can not even twist the cap off the bottle.
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                <!-- .row -->

                <div class="row">

                    <div class="col-sm-6">

                        <div class="iconboxleft">
                            <div class="iconboxleft-icon">
                                <span class="fa fa-language"></span>
                            </div>
                            <div class="iconboxleft-text">
                                <h3 class="iconboxleft-title"><a href="http://jingyeyoufengguo.gitee.io/assignment-12">李叙冬</a> </h3>
                                <div class="iconboxleft-desc">
                                    I am Li Xudong, a typical Scorpio girl. I am 20 years old and studying as a college student. I like nature and travel and my biggest wish is to plant trees in the Sahara Desert.
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-sm-6">

                        <div class="iconboxleft wow fadeInUp animated" data-wow-delay=".2s" style="visibility: visible; -webkit-animation: fadeInUp 0.2s;">
                            <div class="iconboxleft-icon">
                                <span class="fa fa-code"></span>
                            </div>
                            <div class="iconboxleft-text">
                                <h3 class="iconboxleft-title"><a href="http://ouyang-wanyu.gitee.io/personal-website ">欧阳婉玉</a> </h3>
                                <div class="iconboxleft-desc">

                                    A cheerful person, very optimistic, like to share happiness. Like calligraphy and music, meteors and fireworks.

                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                <!-- .row -->

            </div>
            <!-- col-xs-12 -->

        </div>
        <!-- .row -->

    </div>



    <div id="jump3" class="jumper">
    </div>
    <div class="section type-1" style="padding-bottom: 0">
        <div class="container">
            <div class="section-headlines">
                <h4>Featured Works</h4>
                <div class="module-line"></div>
                <div class="section-intro">
                    There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
                </div>
            </div>
            <div class="gallery-control">
                <div data-toggle="buttons">
                    <label class="btn btn-outline slim filter active" data-filter="phone tablet desktop">
                        <input type="radio" name="options" id="option1">
                        All
                    </label>
                    <label class="btn btn-outline slim filter" data-filter="phone">
                        <input type="radio" name="options" id="option2">
                        Phone
                    </label>
                    <label class="btn btn-outline slim filter" data-filter="tablet">
                        <input type="radio" name="options" id="option3">
                        Tablet
                    </label>
                    <label class="btn btn-outline  slim filter" data-filter="desktop">
                        <input type="radio" name="options" id="option3">
                        Desktop
                    </label>
                </div>
            </div>
        </div>
        <div class="mixitup">
            <ul id="portfolio" class="unstyled">
                <li class="mix phone">
                    <div>
                        <div class="media-thumb">
                            <img src="img/portfolio/place-1.jpg">
                            <div class="media-desc">
                                <div>
                                    <p>
                                        <b>A Project</b></p>
                                    <div>
                                        The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="mix tablet">
                    <div>
                        <div class="media-thumb">
                            <img src="img/portfolio/place-2.jpg">
                            <div class="media-desc">
                                <div>
                                    <p>
                                        <b>A Project</b></p>
                                    <div>
                                        The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="mix desktop">
                    <div>
                        <div class="media-thumb">
                            <img src="img/portfolio/place-3.jpg">
                            <div class="media-desc">
                                <div>
                                    <p>
                                        <b>A Project</b></p>
                                    <div>
                                        The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="mix tablet">
                    <div>
                        <div class="media-thumb">
                            <img src="img/portfolio/place-4.jpg">
                            <div class="media-desc">
                                <div>
                                    <p>
                                        <b>A Project</b></p>
                                    <div>
                                        The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="mix tablet">
                    <div>
                        <div class="media-thumb">
                            <img src="img/portfolio/place-5.jpg">
                            <div class="media-desc">
                                <div>
                                    <p>
                                        <b>A Project</b></p>
                                    <div>
                                        The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="mix tablet">
                    <div>
                        <div class="media-thumb">
                            <img src="img/portfolio/place-6.jpg">
                            <div class="media-desc">
                                <div>
                                    <p>
                                        <b>A Project</b></p>
                                    <div>
                                        The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="mix tablet">
                    <div>
                        <div class="media-thumb">
                            <img src="img/portfolio/place-7.jpg">
                            <div class="media-desc">
                                <div>
                                    <p>
                                        <b>A Project</b></p>
                                    <div>
                                        The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="mix phone">
                    <div>
                        <div class="media-thumb">
                            <img src="img/portfolio/place-8.jpg">
                            <div class="media-desc">
                                <div>
                                    <p>
                                        <b>A Project</b></p>
                                    <div>
                                        The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="mix tablet">
                    <div>
                        <div class="media-thumb">
                            <img src="img/portfolio/place-9.jpg">
                            <div class="media-desc">
                                <div>
                                    <p>
                                        <b>A Project</b></p>
                                    <div>
                                        The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="mix desktop">
                    <div>
                        <div class="media-thumb">
                            <img src="img/portfolio/place-10.jpg">
                            <div class="media-desc">
                                <div>
                                    <p>
                                        <b>A Project</b></p>
                                    <div>
                                        The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!--end:.mixitup-->
    </div>
    <div class="copyrights">Collect from <a href="http://www.cssmoban.com/">企业网站模板</a></div>
    <div id="jump4" class="jumper">
    </div>
    <div class="section type-3">
        <div class="container">
            <div class="section-headlines">
                <h4>
                    Pricing Plans</h4>
                <div class="module-line"></div>
                <div class="section-intro">
                    There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
                </div>
            </div>











        </div>


    </div>
    </div>
    <div id="jump5" class="jumper">
    </div>
    <div class="section type-1" id="team">
        <div class="container">
            <div class="section-headlines">
                <h4>
                    Our Team</h4>
                <div class="module-line"></div>
                <div class="section-intro">
                    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                </div>
            </div>


            <div class="row">
                <div class="col-lg-12">

                    <div id="team-carousel" class="carousel slide" data-ride="carousel" data-interval="9999999">

                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#team-carousel" data-slide-to="0" class="active"></li>
                            <li data-target="#team-carousel" data-slide-to="1" class=""></li>
                            <li data-target="#team-carousel" data-slide-to="2" class=""></li>
                        </ol>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <!-- Item 1 -->
                            <div class="item active">
                                <div class="cover-container">
                                    <div class="team-member-icon">
                                        <div class="person-avatar">
                                            <img src="img/avatar/avatar-2.jpg" class="avatar size-default img-circle">
                                        </div>
                                    </div>
                                    <h2 class="team-member-title ">
                                        John Donga
                                    </h2>
                                    <h4>
                                        Project Manager
                                    </h4>
                                    <p class="team-member-summary g-line-height-lg">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at scelerisque diam, ut pellentesque leo. Morbi lacinia ut nibh eget euismod. Donec molestie odio sed leo interdum ultrices.
                                    </p>

                                </div>
                            </div>
                            <!-- Item 2 -->
                            <div class="item">
                                <div class="cover-container">
                                    <div class="team-member-icon">
                                        <div class="person-avatar">
                                            <img src="img/avatar/avatar-2.jpg" class="avatar size-default img-circle">
                                        </div>
                                    </div>
                                    <h2 class="team-member-title ">
                                        Judy Dongi
                                    </h2>
                                    <h4>
                                        iOS Developer
                                    </h4>
                                    <p class="team-member-summary g-line-height-lg">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at scelerisque diam, ut pellentesque leo. Morbi lacinia ut nibh eget euismod. Donec molestie odio sed leo interdum ultrices.
                                    </p>

                                </div>
                            </div>
                            <!-- Item 3 -->
                            <div class="item">
                                <div class="cover-container">
                                    <div class="team-member-icon">
                                        <div class="person-avatar">
                                            <img src="img/avatar/avatar-2.jpg" class="avatar size-default img-circle">
                                        </div>
                                    </div>
                                    <h2 class="team-member-title ">
                                        Richard Chamcha
                                    </h2>
                                    <h4>
                                        Android Developer
                                    </h4>
                                    <p class="team-member-summary g-line-height-lg">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at scelerisque diam, ut pellentesque leo. Morbi lacinia ut nibh eget euismod. Donec molestie odio sed leo interdum ultrices.
                                    </p>

                                </div>
                            </div>
                        </div>

                        <!-- Controls -->
                        <a class="left carousel-control" href="#team-carousel" role="button" data-slide="prev">
                            <span class="fa fa-chevron-left"></span>
                        </a>
                        <a class="right carousel-control" href="#team-carousel" role="button" data-slide="next">
                            <span class="fa fa-chevron-right"></span>
                        </a>
                    </div>

                </div>
            </div>


        </div>
        <!--end:.container-->
    </div>
    <div class="nojumper">
    </div>
    <div class="section type-3">
        <div class="container">
            <div class="section-headlines">
                <h4>
                    Testimonials</h4>
                <div class="module-line"></div>
                <div class="section-intro">
                    We worked on digital strategies for 200 brands worldwide.
                </div>
            </div>
            <div id="carousel-testimonial" class="carousel slide bs-docs-carousel-example">
                <ol class="carousel-indicators">
                    <li data-target="#carousel-testimonial" data-slide-to="0" class=""></li>
                    <li data-target="#carousel-testimonial" data-slide-to="1" class=""></li>
                    <li data-target="#carousel-testimonial" data-slide-to="2" class=""></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="testimonial media">
                            <div class="testimonial-avatar pull-right hidden-xs	">
                                <img src="img/avatar/avatar-2.jpg" class="avatar size-default img-circle">
                            </div>
                            <div class="testimonial-content media-body">
                                <p class="lead">
                                    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
                                    content here', making it look like readable English.
                                </p>
                                Founder at by EGrappler - <b>John Donga</b>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="testimonial media">
                            <div class="testimonial-avatar pull-right hidden-xs	">
                                <img src="img/avatar/avatar-3.jpg" class="avatar size-default img-circle">
                            </div>
                            <div class="testimonial-content media-body">
                                <p class="lead">
                                    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
                                    content here', making it look like readable English.
                                </p>
                                Founder at Greepit.com - <b>John Donga</b>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="testimonial media">
                            <div class="testimonial-avatar pull-right hidden-xs	">
                                <img src="img/avatar/avatar-1.jpg" class="avatar size-default img-circle">
                            </div>
                            <div class="testimonial-content media-body">
                                <p class="lead">
                                    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
                                    content here', making it look like readable English.
                                </p>
                                Founder at by EGrappler - <b>John Donga</b>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="testimonial media">
                            <div class="testimonial-avatar pull-right hidden-xs	">
                                <img src="img/avatar/avatar-1.jpg" class="avatar size-default img-circle">
                            </div>
                            <div class="testimonial-content media-body">
                                <p class="lead">
                                    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
                                    content here', making it look like readable English.
                                </p>
                                Founder at by EGrappler - <b>John Donga</b>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-controller btn-group">
                    <a class="btn btn-small" href="#carousel-testimonial" data-slide="prev"><i
                        class="fa fa-chevron-left"></i></a><a class="btn btn-small" href="#carousel-testimonial" data-slide="next"><i class="fa fa-chevron-right"></i></a>
                </div>
            </div>
        </div>
    </div>


    <div id="jump6" class="jumper">
    </div>

    <div id="blog" class="section section-blog loaded">
        <div class="container">
            <div class="section-headlines">
                <h4>Blog</h4>
                <div class="module-line"></div>
                <div class="section-intro">
                    Fresh, Latest and Useful.
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <article class="hentry post">
                        <div class="row">
                            <div class="entry-thumbnail col-lg-4 col-md-5 col-sm-4">
                                <a href="javascript">
                                    <img src="img/blog/blog-1.jpg" alt="">
                                    </span>
                                </a>
                            </div>
                            <div class="col-lg-8 col-md-7 col-sm-8">
                                <header class="entry-header">
                                    <h2 class="entry-title"><a href="#">Free Resources at by EGrappler </a></h2>
                                    <div class="entry-meta">By <a href="#">John Donga</a> in <a href="#">EGrappler</a></div>
                                </header>
                                <div class="entry-content">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at scelerisque diam, ut pellentesque leo.</p>

                                    <a href="#" class="txt-btn">Continue Reading</a>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
                <div class="col-md-6">
                    <article class="hentry post">
                        <div class="row">
                            <div class="entry-thumbnail col-lg-4 col-md-5 col-sm-4">
                                <a href="javascript">
                                    <img src="img/blog/blog-2.jpg" alt="">
                                    </span>
                                </a>
                            </div>
                            <div class="col-lg-8 col-md-7 col-sm-8">
                                <header class="entry-header">
                                    <h2 class="entry-title"><a href="#">Free Resources at Greepit.com</a></h2>
                                    <div class="entry-meta">By <a href="#">Chamchi & Doe</a> in <a href="#">Greepit</a></div>
                                </header>
                                <div class="entry-content">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at scelerisque diam, ut pellentesque leo.</p>
                                    <a href="#" class="txt-btn">Continue Reading</a>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>

    <div class="nojumper">
    </div>

    <div id="clients" class="section type-2">
        <div class="container">
            <div class="section-headlines">
                <h4>Our Clients</h4>
                <div class="module-line"></div>
                <div class="section-intro">
                    We worked on digital strategies for 200 brands worldwide.
                </div>
            </div>

            <div class="row">
                <div class="col-md-2 col-sm-4 col-xs-6">
                    <a href="#"><img src="img/clients/client-1.png" alt=""></a>
                </div>

                <div class="col-md-2 col-sm-4 col-xs-6">
                    <a href="#"><img src="img/clients/client-4.png" alt=""></a>
                </div>


                <div class="col-md-2 col-sm-4 col-xs-6">
                    <a href="#"><img src="img/clients/client-6.png" alt=""></a>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6">
                    <a href="#"><img src="img/clients/client-3.png" alt=""></a>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6">
                    <a href="#"><img src="img/clients/client-2.png" alt=""></a>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6">
                    <a href="#"><img src="img/clients/client-5.png" alt=""></a>
                </div>

            </div>
        </div>
    </div>


    <div id="jump7" class="jumper">
    </div>
    <div class="section type-1 section-contact">
        <div class="container">
            <div class="section-headlines">
                <h4>
                    Contact Us</h2>
                    <div class="module-line"></div>
            </div>
            <form>
                <div class="row">
                    <div class="col-lg-4">
                        <address>
                        <div class="address-row">
                           <div class="social-network">
										<h3>Let's be friends!</h3>
										<ul class="social">
											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
											<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
											<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
											<li><a href="#"><i class="fa fa-behance"></i></a></li>
											<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
										</ul><!-- /.social -->
									</div>
                                    
                            
                        </div>
                    </address>
                        <div class="visible-xs visible-sm">
                            <br class="gap-30" />
                            <hr class="gap-divider" />
                            <br class="gap-30" />
                        </div>
                    </div>
                    <div class="col-lg-7 col-lg-offset-1">
                        <form role="form" method="post" action="#" id="contactform">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control" id="name" name="name" placeholder="Your Name *"><br class="gap-15" />
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control" id="email" name="email" placeholder="Your Email *"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject">
                            </div>
                            <div class="form-group">
                                <textarea class="form-control" id="message" name="message" rows="8"></textarea>
                            </div>
                            <button id="button-send" class="btn btn-block btn-success">
                        Send Message Now
                    </button>
                            <div id="success">
                                Your message has been successfully!</div>
                            <div id="error">
                                Unable to send your message, please try later.</div>
                        </form>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="section section-half type-3 above-footer">
        <div class="container inner">
            <div class="row">

                <div class="col-md-3 col-sm-6 inner">
                    <h4>Who we are</h4>
                    <a href="javascript:"><img class="logo img-intext" src="img/logo.png" alt=""></a>
                    <p class="MT20">
                        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                    </p>

                </div>
                <!-- /.col -->

                <div class="col-md-3 col-sm-6 inner">
                    <h4>Latest works</h4>

                    <div class="row thumbs gap-xs">

                        <div class="col-xs-6 thumb">
                            <figure class="icon-overlay icn-link">
                                <a href="portfolio-post.html"><span class="icn-more"></span><img src="img/portfolio/place-1.jpg" alt=""></a>
                            </figure>
                        </div>
                        <!-- /.thumb -->

                        <div class="col-xs-6 thumb">
                            <figure class="icon-overlay icn-link">
                                <a href="portfolio-post.html"><span class="icn-more"></span><img src="img/portfolio/place-2.jpg" alt=""></a>
                            </figure>
                        </div>
                        <!-- /.thumb -->

                        <div class="col-xs-6 thumb">
                            <figure class="icon-overlay icn-link">
                                <a href="portfolio-post.html"><span class="icn-more"></span><img src="img/portfolio/place-3.jpg" alt=""></a>
                            </figure>
                        </div>
                        <!-- /.thumb -->

                        <div class="col-xs-6 thumb">
                            <figure class="icon-overlay icn-link">
                                <a href="portfolio-post.html"><span class="icn-more"></span><img src="img/portfolio/place-4.jpg" alt=""></a>
                            </figure>
                        </div>
                        <!-- /.thumb -->

                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.col -->


                <div class="col-md-3 col-sm-6 inner">
                    <h4>Get In Touch</h4>
                    <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>
                    <ul class="contacts">
                        <li><i class="fa fa-map-marker"></i> 99 Green Street, White Plaza</li>
                        <li><i class="fa fa-mobile"></i> +1 123 456 8899</li>
                        <li><a href="javascript:"><i class="fa fa-envelope-o"></i> info@dummy.com</a></li>
                    </ul>
                    <!-- /.contacts -->
                </div>
                <!-- /.col -->

                <div class="col-md-3 col-sm-6 inner">
                    <h4>Weekly Newsletter</h4>
                    <p>As opposed to using 'Content here, content here', making it look like readable English.</p>
                    <form id="newsletter" class="form-inline newsletter" role="form">
                        <label class="sr-only" for="exampleInputEmail">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter your email address">
                        <button type="submit" class="btn btn-default btn-small">Subscribe</button>
                    </form>
                </div>
                <!-- /.col -->

            </div>
            <!-- /.row -->
        </div>
    </div>

    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <a href="#">2020@部u  byfhzjzah</a>
                </div>
            </div>
        </div>
    </footer>
    <!--Scripts-->
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/owl.carousel.min.js"></script>
    <script type="text/javascript" src="js/jquery.smooth-scroll.min.js"></script>
    <script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="js/modernizr.js" type="text/javascript"></script>
    <script src="js/jquery.fancybox.pack.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/custom.js"></script>
</body>

</html>